<template>
  <div style="padding: 30px">
    <el-button @click="HandlerQuery()">默认按钮</el-button>
    <el-button type="primary" @click="HandlerQuery1()">主要按钮</el-button>
    <el-button type="success" @click="HandlerPrice()">生成账单</el-button>
    <el-button type="info" @click="HandlerSaveMeter()">上传水电费</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>

    <el-table :data="prc_list" style="width: 100%; margin-top: 0.5%" border>
      <el-table-column
        prop="prcName"
        label="费用项目"
        width="180"
        align="center"
      >
      </el-table-column>

      <!-- <el-table-column prop="price" label="金额" align="center" width="180">
          
        </el-table-column> -->

      <el-table-column prop="unitPrice" label="单价" align="center" width="180">
      </el-table-column>
      <el-table-column
        prop="degrees"
        label="度数/面积/车数"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="biliel"
        label="增长比比列"
        align="center"
        width="180"
      >
      </el-table-column>

      <el-table-column prop="price" label="金额" align="center" width="180">
        <template slot-scope="scope">
          {{ (scope.row.degrees * scope.row.unitPrice).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column prop="startDate" align="center" label="开始时间">
      </el-table-column>
      <el-table-column prop="endDate" align="center" label="截止时间">
      </el-table-column>
      <el-table-column prop="issueNumber" align="center" label="期数">
      </el-table-column>
      <el-table-column align="center" label="缴费状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.payStatus == 0" type="success" size="mini">
            已缴费
          </el-tag>
          <el-tag v-if="scope.row.payStatus == 1" size="mini" type="danger">
            未缴纳
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" align="center" label="备注">
      </el-table-column>
    </el-table>

    <el-table :data="list2" style="width: 100%; margin-top: 0.5%" border>
      <el-table-column prop="id" align="center" label="期数"> </el-table-column>

      <el-table-column
        prop="countRentPrice"
        label="租金总价"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="countPropertyPrice"
        label="物业总价"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="countWaterPrice"
        label="水费总价"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="countElectricityPrice"
        label="电费总价"
        align="center"
        width="180"
      >
      </el-table-column>

      <el-table-column prop="startDate" align="center" label="开始时间">
      </el-table-column>
      <el-table-column prop="endDate" align="center" label="截止时间">
      </el-table-column>
      <el-table-column prop="issueNumber" align="center" label="期数">
      </el-table-column>

      <el-table-column prop="remarks" align="center" label="备注">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getLeaseDetails,
  getLeasePriceTypeId,
  getLeaseWx,
  getGenerateBill,
  saveMeterReading,
} from "@/api/commonapi";
export default {
  name: "index",
  data() {
    return {
      list: [],
      listLoading: true,
      prc_list: [],
      lid: 225,
      list2: [],
    };
  },
  methods: {
    fetchData(obj) {
      this.listLoading = true;
    },
    HandlerQuery() {
      this.listLoading = true;
      getLeasePriceTypeId(this.lid).then((response) => {
        this.listLoading = false;
        this.prc_list = response.data;
      });
    },

    HandlerQuery1() {
      this.listLoading = true;
      var data = {
        phone: "18782616077",
        parkId: 19,
      };
      getLeaseWx(data).then((response) => {
        this.listLoading = false;
        this.list2 = response.data;
      });
    },

    HandlerPrice() {
      this.listLoading = true;
      getGenerateBill(225).then((response) => {
        this.listLoading = false;
        message.success("生成账单成功");
      });
    },
    HandlerSaveMeter() {
      this.listLoading = true;
      var data = {
        leaseId: 19, // 设备号id
        dus: 134,
        types: 4,
      };
      saveMeterReading(data.leaseId,data.dus,data.types).then((response) => {
        this.listLoading = false;
        this.$message('生成账单成功');     
      });
    },
  },
};
</script>